<template>
    <ATable :size="size" :pagination="false" bordered :dataSource="data" :columns="columns" rowKey="Id" v-bind="$attrs">
        <template #bodyCell="{ column, text, index, record }">
            <slot :name="column.dataIndex" :text="text" :index="index" :row="record" :column="column"
                v-if="$slots[column.dataIndex]" />
        </template>
        <template #expandedRowRender="{ record }" v-if="$slots.expand">
            <slot name="expand" :row="record"></slot>
        </template>
    </ATable>
    <ASpace flex class="pagination" v-if="$slots.footer || page">
        <slot name="footer"></slot>
        <APagination v-if="page" v-model:current="page.PageIndex" size="small" v-model:pageSize="page.PageSize"
            :total="page.total" :show-total="total => $t('common.total', { total })"
            @change="(page, size) => $emit('pageChange', page, size)" />
    </ASpace>
</template>

<script setup>
import { Table as ATable, Pagination as APagination } from 'ant-design-vue';
import { computed } from 'vue';
import './index.scss';

const props = defineProps({
    /**
     * 数据
     */
    data: {
        type: Array,
        required: true
    },
    /**
     * 分页对象
     */
    page: Object,
    /**
     * 大小
     */
    size: {
        type: String,
        default: 'small'
    },
    /**
     * 列
     */
    cols: {
        type: Object,
        required: true
    }
});

/**
 * 列
 */
const columns = computed(() => {
    const _cols = [];
    for (const key in props.cols) {
        const item = props.cols[key];
        if (typeof item === 'string') {
            _cols.push({
                dataIndex: key,
                align: 'center',
                title: item
            });
        } else {
            _cols.push({
                dataIndex: key,
                align: 'center',
                ...item
            });
        }
    }
    return _cols;
});
</script>